<template>
	<view>
		<u-navbar title-size="34" leftIconColor="#343A40" title-color="#343A40" :border-bottom="false"
			leftIcon="arrow-left" :custom-back="tui.goBack" placeholder>
			<view class="slot-wrap">
				<view class="search-wrap">
					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
					<u-search v-model.trim="keyword" :show-action="true" height="70" bg-color="#ffffff" border-color="#D8D9E1"
						@custom="searchValue" action-text="搜索" :action-style="{color: '#292940'}"
						placeholder="搜索创作者/作品/专辑" placeholder-color="#CED4DA"
						search-icon-color="#ADB5BD"></u-search>
				</view>
			</view>
		</u-navbar>
		<view class="search-box">
			<view class="d-flex justify-content-between">
				<view class="text-999BA8 fz-28">历史搜索</view>
				<view class="delete-icon" @click="show = true">
					<image src="/static/creation/delete.png"></image>
				</view>
			</view>
			<view class="d-flex search-list-box">
				<view class="search-list text-292940 fz-30" @tap="toSearchList(item)" v-for="item in searchHistory">
					{{item}}</view>
			</view>
		</view>
		<u-modal v-model="show" confirm-text="确认"
			cancel-text="取消" :content="content" show-cancel-button @confirm="confirm" 
			confirm-color="#00C0FF"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				content: '确定清除搜索记录吗？',
				keyword: ''
			}
		},
		watch: {
			keyword(val) {
				this.$nextTick(() => {
					this.keyword = this.$u.trim(val.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g, ''))
				})
			}
		},
		computed: {
			searchHistory() {
				return this.$store.state.public.searchHistory
			}
		},
		methods: {
			confirm() {
				this.$store.commit('public/SET_CLEARHISTORY')
				this.show = false
			},
			searchValue(e) {
				if (this.keyword !== '') {
					this.$store.commit('public/SET_SEARCHHISTORY', this.keyword)
					uni.navigateTo({
						url: `/pages/search/search-list?keyword=${this.keyword}`
					})
				} else {
					uni.$u.toast('请输入需要搜索的关键字')
				}
			},
			toSearchList(item) {
				uni.navigateTo({
					url: `/pages/search/search-list?keyword=${item}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;

		.search-wrap {
			width: 100%;
			margin: 0 20rpx 0 0;
			/deep/.u-action-active{
				position: absolute;
				right:30upx;
				width: 110upx;
			}
			/deep/.u-action-active:before{
				width: 1upx;
				height: 30upx;
				background: #999BA8;
				position: absolute;
				content: '';
				left:0;
				top:6upx;
			}
			/deep/.u-close-wrap{
				position: absolute;
				right:80px !important;
			}
			/deep/.u-input{
				padding-right: 85px;
			}
		}
	}

	.search-box {
		width: 100%;
		padding: 43upx 30upx 30upx;
		box-sizing: border-box;

		.search-list-box {
			flex-wrap: wrap;
			padding-top: 23upx;

			.search-list {
				display: inline-block;
				padding: 8upx 16upx;
				text-align: center;
				align-items: center;
				//background: #f6f6f6;
				color: #535353;
				margin-right: 16upx;
				margin-bottom: 20upx;
				border-radius: 8upx;
			}
		}
	}

	.delete-icon {
		width: 40upx;
		height: 40upx;

		image {
			width: 40upx;
			height: 40upx;
			vertical-align: top;
		}
	}
</style>
